<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:body>
    	<ui:composition template="/resources/template/layout.xhtml">
    		<ui:define name="contentLayout">
    		
                <p:panel header="Registered Services Metadata" toggleable="true">
                   <p:spacer height="10" style="display:block"/>
                    
                   
                    <p:selectOneMenu value="#{serviceMetaController.serviceID}" rendered="#{serviceMetaController.selectView}">  
				            <f:selectItem itemLabel="Select a service" itemValue="" />  
				            <f:selectItems value="#{serviceMetaController.services}" var="service" itemLabel="#{service.virtualServiceName} - #{service.virtualServiceCategory}"  itemValue="#{service.serviceID}" />  
				            
				            <p:ajax event="change" update=":form-layout:tableABM" listener="#{serviceMetaController.reload}"/>  
        			</p:selectOneMenu>  
                    
                    <p:spacer height="10" style="display:block"/>
                    
                    <p:dataTable id="tableABM" var="config" value="#{serviceMetaController.dataTable}" paginator="true"
                                 paginatorPosition="bottom" rows="15" emptyMessage="No record found" selectionMode="single"
                                 selection="#{serviceMetaController.selectItem}" rowKey="#{config.key}" >
                        
                        <p:ajax event="rowSelect" update="buttonSet" process="@this" />

                        <f:facet name="header">
                            Service Metadata List
                        </f:facet>

                        <p:column headerText="Key">
                            <h:outputText value="#{config.key}" />
                        </p:column>
                        <p:column headerText="Value">
                            <h:outputText value="#{config.value}" />
                        </p:column>

                        <f:facet name="footer">
                        	<h:panelGroup id="buttonSet" style="text-align:left;">
                            <p:commandButton title="New" icon="ui-icon-plus" actionListener="#{serviceMetaController.create}" update=":form-footer:display" oncomplete="detail.show()" >
                                <f:setPropertyActionListener value="#{true}" target="#{serviceMetaController.editMode}" />
                                <f:setPropertyActionListener value="#{true}" target="#{serviceMetaController.newMode}" />
                            </p:commandButton>
                            <p:commandButton title="Edit" widgetVar="btnEdit" icon="ui-icon-pencil" update=":form-footer:display" oncomplete="detail.show()" disabled="#{empty serviceMetaController.selectItem}" >
                                <f:setPropertyActionListener value="#{true}" target="#{serviceMetaController.editMode}" />
                                <f:setPropertyActionListener value="#{false}" target="#{serviceMetaController.newMode}" />
                            </p:commandButton>
                            <p:commandButton title="Remove" widgetVar="btnDelete" icon="ui-icon-close" oncomplete="confirmation.show()" disabled="#{empty serviceMetaController.selectItem}"/>
                            <h:panelGroup style="margin-right: 2.5px;">|</h:panelGroup>
                            <p:commandButton title="Update" icon="ui-icon-refresh" actionListener="#{serviceMetaController.reload}" update=":form-layout:tableABM"  />
                        </h:panelGroup>
                        </f:facet>
                    </p:dataTable>

                    <p:spacer height="20"></p:spacer>
                </p:panel>
           
       			</ui:define>
       			
       			<ui:define name="contentFotter">       		
        	
                <p:dialog id="display" header="Metadata" widgetVar="detail" resizable="false" width="300"  modal="true" >
                    <h:panelGrid columns="2" cellpadding="4" rendered="#{serviceMetaController.selectItem != null}">
                      
                        <h:outputText value="Key:" styleClass="bold" />
                        <p:autoComplete value="#{serviceMetaController.selectItem.key}" completeMethod="#{serviceMetaController.complete}" disabled="#{!serviceMetaController.newMode}" requiredMessage="The metadata key is required" size="35" />      
                        
                        <h:outputText value="Value:" styleClass="bold" />
                        <p:inputText value="#{serviceMetaController.selectItem.value}" required="true"  requiredMessage="The metadata value is required" size="35" />
                        
                        <p:spacer height="0"></p:spacer>
                        <p:spacer height="0"></p:spacer>

                        <f:facet name="footer">
                            <p:outputPanel rendered="#{serviceMetaController.editMode}" layout="block" style="text-align:right">
                                <p:commandButton value="save" icon="ui-icon-check" actionListener="#{serviceMetaController.save}" oncomplete="detail.hide();" update=":form-layout:tableABM" />
                                <p:commandButton value="cancel" onclick="detail.hide()" type="button" icon="ui-icon-close"/>
                            </p:outputPanel>
                        </f:facet>
                    </h:panelGrid>
                </p:dialog>

                <p:confirmDialog message="Are you sure to delete this record?" width="300" header="Please confirm the action" severity="alert" widgetVar="confirmation" >
                    <p:commandButton value="Yes" actionListener="#{serviceMetaController.delete}" oncomplete="confirmation.hide()" update=":form-layout:tableABM" />
                    <p:commandButton value="No" onclick="confirmation.hide()" type="button" />
                </p:confirmDialog>
           
    		</ui:define>
    	</ui:composition>
    </h:body>
</html>